<template>
  <div class="app-container">
	  <el-row style="margin-bottom: 30px;">
		<el-col :span="8"><p>&nbsp;</p></el-col>
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-green"></div></el-col>
				<el-col :span="10">空闲</el-col>
			</el-row>
		</el-col>
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-yellow"></div></el-col>
				<el-col :span="10">待确认</el-col>
			</el-row>
		</el-col>
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-red"></div></el-col>
				<el-col :span="10">已预约</el-col>
			</el-row>
		</el-col>
		<!-- el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-purple"></div></el-col>
				<el-col :span="12">未通过/不可预约</el-col>
			</el-row>
		</el-col -->
		<el-col :span="4" >
			<el-row :gutter="10">
				<el-col :span="10" ><div class="grid-bg bg-purple2"></div></el-col>
				<el-col :span="10">预约记录</el-col>
			</el-row>
		</el-col>
	  </el-row>
		
		<el-row style="margin-bottom: 10px;">
			<el-col :span="3"><div style="min-height: 24px;"></div></el-col>
			<el-col :span="5">
				
				<el-button-group>
				  <el-button plain icon="el-icon-arrow-left" @click="getPerWeek"></el-button>
				  <el-button plain @click="getNextWeek"><i class="el-icon-arrow-right el-icon--right" ></i></el-button>
				  <el-button plain @click="getNowDate()">返回今天</el-button>
				</el-button-group>
			</el-col>
			
			<el-col :span="10">
				
				
				<el-form size="small" :inline="true" v-show="showSearch" label-width="68px">
				<el-form-item prop="selectDate">
				<el-date-picker clearable
				  v-model="selectDate"
				  type="date"
				  :clearable="false"
				  value-format="yyyy-MM-dd"
				  placeholder="">
				</el-date-picker>
				</el-form-item>
				<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				 <!-- el-button type="warning" size="mini" @click="resetQuery">批量新增 -->
				</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="6">
				<el-button
				  type="primary"
				  plain
				  icon="el-icon-plus"
				  size="mini"
				  @click="handleAdd"
				  v-hasPermi="['consult:scheduling:add']"
				>新增</el-button>
				<el-button
				  type="primary"
				  plain
				  icon="el-icon-plus"
				  size="mini"
				  @click="handleAdds"
				  v-hasPermi="['consult:scheduling:add']"
				>批量新增</el-button>
			</el-col>
		</el-row>
        <el-row >
          <el-col :span="3" class="grid-col-frist" v-if="tealist.length > 0">
			<!--div class="grid-tea bg-tea" :class="teaUserName==''?'on':''" @click="changeTea('')">全部</div -->
			<div class="grid-tea bg-tea" v-for="(item, index) in tealist" :class="teaUserName==item.userName?'on':''" @click="changeTea(item.userName)">{{item.nickName}}</div>
		  </el-col>
		  <el-col :span="1" class="grid-col" v-else>
			  <div style="height: 24px;"></div>
		  </el-col>
          <el-col :span="3" v-for="(item, index) in dates" class="grid-col" >
			  <div class="grid-header bg-header">{{item.name}}</div>
			  
			  <div class="grid-content" :class="item2.state==9?'bg-green':item2.state == 0 ? 'bg-yellow' : item2.state == 1 ? 'bg-red': item2.state == 2 || item2.state == 3 ? 'bg-purple' : 'bg-purple2'"
				@click="handleView(item2.schedulingId, item2.schedulingBachId)" v-for="(item2, index2) in schedulingList" v-if="item2.schedulingDate==item.date">{{item2.startTime}}-{{item2.endTime}}</div>
		  </el-col>
        </el-row>

    <!-- 添加或修改我的预约对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
			  <el-form-item label="服务方式" prop="serviceType">
				<el-select v-model="form.serviceType" name="serviceType" @change="serviceTypeChange">  
				<el-option v-for="(item,idx) in serviceTypeList"
				:label="item" 
				:value="item"
				:key="idx"
				></el-option>
				</el-select>
			  </el-form-item>
              <el-form-item label="咨询师选择" prop="userName" v-if="tealist.length > 0">
                <el-select v-model="form.userName" name="serviceType" >
                <el-option v-for="(item,idx) in tealist"
                :label="item.nickName" 
                :value="item.userName"
                :key="idx"
                ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="预约日期" prop="schedulingDate" v-if="schedulingType==1">
				<el-date-picker clearable
				  v-model="form.schedulingDate"
				  type="date"
				  value-format="yyyy-MM-dd"
				  placeholder="请选择预约日期">
				</el-date-picker>
              </el-form-item>
			  <el-form-item label="预约日期" prop="startDate" v-if="schedulingType==2">
					<el-date-picker clearable
					  v-model="form.startDate"
					  type="date"
					  style="width:150px"
					  value-format="yyyy-MM-dd"
					  placeholder="">
					</el-date-picker>
					-
					<el-date-picker clearable
					  v-model="form.endDate"
					  type="date"
					  style="width:150px"
					  value-format="yyyy-MM-dd"
					  placeholder="">
					</el-date-picker>
			  </el-form-item>
			  <el-form-item label="星期" prop="weeks" v-if="schedulingType==2">
				  <template>
				  <el-checkbox-group v-model="form.weeks">
				      <el-checkbox label="日" value="1"></el-checkbox>
				      <el-checkbox label="一" value="2"></el-checkbox>
				      <el-checkbox label="二" value="3"></el-checkbox>
				      <el-checkbox label="三" value="4"></el-checkbox>
				      <el-checkbox label="四" value="5"></el-checkbox>
					  <el-checkbox label="五" value="6"></el-checkbox>
					  <el-checkbox label="六" value="7"></el-checkbox>
				    </el-checkbox-group>
				  </template>	
			  </el-form-item>	  
              <el-form-item label="时间段" prop="startTime">
				  <el-time-select
				    v-model="form.startTime"
					 style="width:150px"
					 :picker-options="{
					        start: '00:00',
					        step: '00:30',
					        end: '23:59'
					      }"
				    placeholder="">
				  </el-time-select>
				-
				<el-time-select
				  v-model="form.endTime"
				  style="width:150px"
				  :picker-options="{
				         start: '00:00',
				         step: '00:30',
				         end: '23:59'
				       }"
				  placeholder="">
				</el-time-select>
              </el-form-item>
              <div v-if="serviceType==2">
              <el-form-item label="咨询主题" prop="subjectType">
				<el-select v-model="form.subjectType" name="subjectType" >
				    <el-option label="已有主题" value="1"></el-option>
					<el-option label="新建主题" value="0"></el-option>
				  </el-select>
              </el-form-item>
              <el-form-item label="主题" prop="subjectName" >
				<el-select v-model="form.subjectName" name="subjectName" v-if="form.subjectType==1" @change="subjectChange">
				    <el-option v-for="(item,idx) in subjectlist" 
				    :label="item.subjectName" 
				    :value="idx"
				    :key="idx"
				    ></el-option>
				  </el-select>
				  <el-input v-model="form.subjectName" placeholder="请输入主题" v-else/>
              </el-form-item>
              <el-form-item label="内容">
                <el-input v-model="form.content" :disabled="form.subjectType==1"/>
              </el-form-item>
              <el-form-item label="报名条件" prop="enrollConditions">
                <el-input v-model="form.enrollConditions" :disabled="form.subjectType==1"/>
              </el-form-item>
			  </div>
			  <el-form-item label="问题类型" prop="qaTypeId">
				<el-select v-model="form.qaTypeId" name="qaTypeId" v-if="form.subjectType==0 || serviceType==1">
					<el-option label="不限" value="0" selected></el-option>
					<el-option v-for="(item,idx) in qaTypeList" 
					:label="item.typeName" 
					:value="item.qaTypeId"
					:key="idx"
					></el-option>
				  </el-select>
				  <el-input v-model="form.typeName" placeholder="" v-else disabled />
			  </el-form-item>
			  <el-form-item label="服务地点" prop="serviceAddress" v-if="online!=1">
			    <el-input v-model="form.serviceAddress" placeholder="请输入服务地点" />
			  </el-form-item>
              <el-form-item label="人数设置" prop="peopleNumber" v-if="serviceType==2">
                <el-input v-model="form.peopleNumber" placeholder="请输入人数设置" type="number"/> 
              </el-form-item>
              <el-form-item label="提前预约小时" prop="appointmentTime" >
                <el-select v-model="form.appointmentTime" name="appointmentTime" >
                    <el-option v-for="(item,idx) in 13" 
                    :label="idx" 
                    :value="idx"
                    :key="idx"
                    ></el-option>
                  </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
    </el-dialog>
	
	<!-- 添加或修改我的预约对话框 -->
	<el-dialog :title="title2" :visible.sync="open2" width="500px" append-to-body>
		<el-row  class="drow">
		  <el-col :span="5" class="dcol">预约状态：</el-col>
		  <el-col :span="15" class="dcol" ><a @click="open3Dialog">未确认({{data.notcount}})</a></el-col>
		</el-row>
		
		<el-row  class="drow">
		  <el-col :span="5" class="dcol">人数状态：</el-col>
		  <el-col :span="15" class="dcol" >({{data.yPeopleNumber}}){{data.peopleNumber}}</el-col>
		</el-row>
		
		<el-row  class="drow">
		  <el-col :span="5" class="dcol">咨询方式：</el-col>
		  <el-col :span="15" class="dcol" >{{data.serviceType}}</el-col>
		</el-row>
		<el-row class="drow">
		  <el-col :span="5" class="dcol">问题类型：</el-col>
		  <el-col :span="15" class="dcol">{{data.typeName? data.typeName: '不限'}}</el-col>
		</el-row>  
		<div v-if="data.serviceType != '个体咨询（线上）' && data.serviceType != '个体咨询（线下）'">
			<el-row class="drow">
			  <el-col :span="5" class="dcol">主题：</el-col>
			  <el-col :span="15" class="dcol">{{data.subjectName}}</el-col>
			</el-row> 
			<el-row class="drow">
			  <el-col :span="5" class="dcol">内容：</el-col>
			  <el-col :span="15" class="dcol">{{data.content}}</el-col>
			</el-row> 
			<el-row class="drow">
			  <el-col :span="5" class="dcol">报名条件：</el-col>
			  <el-col :span="15" class="dcol">{{data.enrollConditions}}</el-col>
			</el-row> 
			
		</div>
		<el-row class="drow" v-if="data.serviceType != '个体咨询（线上）' && data.serviceType != '团体咨询（线上）'">
		  <el-col :span="5" class="dcol">服务地点：</el-col>
		  <el-col :span="15" class="dcol">{{data.serviceAddress}}</el-col>
		</el-row> 
	  <div slot="footer" class="dialog-footer">
		<el-button v-if="data.yPeopleNumber==0"
		  type="danger"
		  plain
		  icon="el-icon-delete"
		  size="mini"
		  @click="handleDelete"
		  v-hasPermi="['consult:scheduling:remove']"
		>删除</el-button>  
		<el-button
		  type="danger"
		  plain
		  icon="el-icon-delete"
		  size="mini"
		  @click="handleDeletes"
		  v-if="data.schedulingBachId && data.yPeopleNumber==0"
		  v-hasPermi="['consult:scheduling:remove']"
		>批量删除</el-button> 
	    <el-button @click="cancel">取 消</el-button>
	  </div>
	</el-dialog>
	
	<el-dialog title="预约确认" :visible.sync="open3" width="1200px"  append-to-body>
		<el-table v-loading="loading" :data="data.list" style="min-height: 500px;">
		  <el-table-column label="姓名" align="center" prop="fullname" />
		  <el-table-column label="登录名" align="center" prop="userName" />
		  <el-table-column label="联系方式" align="center" prop="mobile" />
		  <el-table-column label="问题类型" align="center" prop="typeName" />
		  <el-table-column label="问题详情" align="center" prop="content" />
		  <el-table-column label="状态" align="center" prop="content" >
				<template slot-scope="scope">
				  <span>{{ scope.row.state == 0 ? '未确认' : scope.row.state == 1 ? '已确认' : scope.row.state == 2 ? '不通过' : '' }}</span>
				</template>
		  </el-table-column>	  
		  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
		    <template slot-scope="scope">
		      <el-button
		        size="mini"
		        type="text"
		        icon="el-icon-edit"
		        @click="handleUpdate1(scope.row)" v-if="scope.row.state < 3"
		      >确认</el-button>
		      <el-button
		        size="mini"
		        type="text"
		        icon="el-icon-edit"
		        @click="handleUpdate2(scope.row)" v-if="scope.row.state < 3"
		      >不通过</el-button>
		    </template>
		  </el-table-column>
		</el-table>
	</el-dialog>
  </div>
</template>

<script>
import { listScheduling, getScheduling, delScheduling, addScheduling, updateScheduling, updateState } from "@/api/consult/scheduling";
import { addscheduingBach, delscheduingBach} from "@/api/consult/scheduling-bach";

import { isUserTeacher, selectQaType, selectTeacherList, selectDate, selectNowDate, perWeek, nextWeek, selectSubjectList } from "@/api/consult/common";

export default {
  name: "Scheduling",
  data() {
    return {
	  serviceTypeList: ['个体咨询（线下）','个体咨询（线上）','团体咨询（线下）','团体咨询（线上）','讲座','团体辅导','工作坊','其他'],
	  dates: [],
	  selectDate: '',
	  tealist: [],
	  teaUserName: '',
	  subjectlist: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
	  qaTypeList: [],
      // 我的预约表格数据
      schedulingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        teaUserName: null,
		params: {
			startDate: '',
			endDate: ''
		}
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        serviceType: [
		  { required: true, message: "服务方式不能为空", trigger: "change" }
		],
		userName: [
		  { required: true, message: "咨询师不能为空", trigger: "blur" }
		],
		schedulingDate: [
		  { required: true, message: "排班日期不能为空", trigger: "blur" }
		],
		startDate: [
		  { required: true, message: "排班日期不能为空", trigger: "blur" }
		],
		endDate: [
		  { required: true, message: "排班日期不能为空", trigger: "blur" }
		],
		weeks: [
			{ required: true, message: "排班星期不能为空", trigger: "blur" }
		],
		startTime: [
		  { required: true, message: "排班开始时间不能为空", trigger: "blur" }
		],
		endTime: [
		  { required: true, message: "排班结束时间不能为空", trigger: "blur" }
		],
		subjectType: [
		  { required: true, message: "咨询主题不能为空", trigger: "blur" }
		],
		subjectName: [
		  { required: true, message: "主题不能为空", trigger: "blur" }
		],
		qaTypeId: [
		  { required: true, message: "问题类型不能为空", trigger: "blur" }
		],
		serviceAddress: [
		  { required: true, message: "服务地点不能为空", trigger: "blur" }
		],
		peopleNumber: [
		  { required: true, message: "人数不能为空", trigger: "blur" },
		  {number: true, message: "人数只能为数字", trigger: "blur" }
		],
		appointmentTime: [
		  { required: true, message: "提交预约时间不能为空", trigger: "blur" }
		]
      },
	  open2: false,
	  title2: '查看',
	  open3: false,
	  data: {
		  
	  },
	  serviceType: 1,
	  online: 0,
	  schedulingType: 1 // 排班类型 2 批量
    };
  },
  created() {
	  //console.log(this.$store.state.user)
	this.getQaTypeList();
	this.selectTeacherList();
	this.selectSubjectList();
    //this.getList();
  },
  methods: {
	  getQaTypeList() {
	    selectQaType().then(response => {
	      this.qaTypeList = response.data;
	    });
	  },
	  qaTypeNameChange(val) {
		  console.log(val)
		  this.qaType = val;
	  },
	selectTeacherList() {
		isUserTeacher().then(response => {
			//console.log(response)
			if(response.data) {
				//console.log(this.$store.state.user)
				this.teaUserName = this.$store.state.user.name;
				this.getNowDate();
			} else {
				selectTeacherList().then(response => {
					this.tealist = response.data;
					//console.log(response)
					this.teaUserName = this.tealist[0].userName;
					this.getNowDate();
				});
			}
		})
		
	},  
	selectSubjectList() {
		selectSubjectList().then(response => {
			this.subjectlist = response.data;
		});
	},
	serviceTypeChange(val) {
		console.log(val)
		if(val == '个体咨询（线下）' || val=='个体咨询（线上）'){
			this.serviceType = 1;
		} else {
			this.serviceType= 2;
		}
		if(val.indexOf('线上')>-1) {
			this.online = 1
		} else {
			this.online = 0
		}
	},
	subjectChange(val) {
		console.log(val)
		let data = this.subjectlist[val];
		this.form.subjectId = data.subjectId;
		this.form.subjectName = data.subjectName;
		this.form.content = data.content;
		this.form.enrollConditions = data.enrollConditions;
		this.form.qaTypeId = data.qaTypeId;
		this.qaTypeList.forEach(item=> {
			if(item.qaTypeId == data.qaTypeId) {
				this.form.typeName = item.typeName
			}
		})
		if(!this.form.typeName) {
			this.form.qaTypeId = 0;
			this.form.typeName = '不限'
		}
	},
	getNowDate() {
		selectNowDate().then(response => {
			this.selectDate = response.data.date;
			this.dates = response.data.list;
			this.getList();
		});
	},
	getPerWeek() {
		if(this.selectDate)
		perWeek(this.selectDate).then(response => {
			this.selectDate = response.data.date;
			this.dates = response.data.list;
			this.getList();
		});
	},
	getNextWeek() {
		if(this.selectDate)
		nextWeek(this.selectDate).then(response => {
			this.selectDate = response.data.date;
			this.dates = response.data.list;
			this.getList();
		});
	},
	handleQuery() {
		if(this.selectDate)
		selectDate(this.selectDate).then(response => {
			this.selectDate = response.data.date;
			this.dates = response.data.list;
			this.getList();
		});
	},
	changeTea(userName) {
		this.teaUserName = userName;
		this.getList();
	},
    /** 查询我的预约列表 */
    getList() {
      this.loading = true;
	  this.queryParams.params.teaUserName = this.teaUserName;
	  this.queryParams.params.startDate = this.dates[0].date;
	  this.queryParams.params.endDate = this.dates[6].date;
      listScheduling(this.queryParams).then(response => {
        this.schedulingList = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
	  this.open2 = false;
	  this.data = {
		  
	  };
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
		  schedulingId: null,
		  schedulingBachId: null,
		  serviceType: null,
		  userName: null,
		  schedulingDate: null,
		  startTime: null,
		  endTime: null,
		  qaTypeId: null,
		  typeName: null,
		  appointmentTime: null,
		  subjectId: null,
		  subjectName: null,
		  content: null,
		  enrollConditions: null,
		  peopleNumber: null,
		  yPeopleNumber: null,
		  serviceAddress: null,
		  createBy: null,
		  createTime: null,
		  updateBy: null,
		  updateTime: null,
		  weeks: [],
		  startDate: null,
		  endDate: null
		  
		};
		this.serviceType=1;
		this.online= 0;
      this.resetForm("form");
    },
	handleView(id) {
		getScheduling(id).then(response => {
		  this.data = response.data;
		  this.title2 = response.data.serviceType
		  this.open2 = true;
		});
	},
    /** 新增按钮操作 */
    handleAdd() {
		this.reset();
	    this.open = true;
	    this.title = "添加排班";
		this.schedulingType = 1;
    },
	handleAdds() {
		this.reset();
		this.open = true;
		this.title = "批量添加";
		this.schedulingType = 2;
	},
	handleUpdate1(item) {
		updateState({
			myAppointmentId: item.myAppointmentId,
			schedulingId: item.schedulingId,
			state: 1
		}).then(response => {
		  this.$modal.msgSuccess("确认成功");
		  //item.state = 1;
		  this.handleView(item.schedulingId)
		});
	},
	handleUpdate2(item) {
		updateState({
			myAppointmentId: item.myAppointmentId,
			state: 2
		}).then(response => {
		  this.$modal.msgSuccess("已不通过");
		  this.handleView(item.schedulingId)
		});
	},
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
			//this.form.schedulingId = this.data.schedulingId;
		if(!this.form.userName) {
			this.form.userName = this.teaUserName;
		}
		if(this.form.startTime>this.form.endTime) {
			this.$modal.msgError("时间段不正确");
			return false;
		}
		if(this.schedulingType == 2) { // 批量
		if(this.form.startDate>this.form.endDate) {
			this.$modal.msgError("日期段不正确");
			return false;
		}
		this.form.weeks = this.form.weeks.join(',');
			addscheduingBach(this.form).then(response => {
				this.form.weeks = [];
			  if(response.code==200) {
				  this.$modal.msgSuccess("提交成功");
				  this.open = false;
				  this.getList();
			  } else {
				  this.$modal.msgSuccess("提交失败，请刷新重试");
			  }
			  
			});
		} else
          addScheduling(this.form).then(response => {
			  if(response.code==200) {
				  this.$modal.msgSuccess("提交成功");
				  this.open = false;
				  this.getList();
			  } else {
				  this.$modal.msgSuccess("提交失败，请刷新重试");
			  }
            
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete() {
      const schedulingIds = this.data.schedulingId;
	  console.log(this.data)
      this.$modal.confirm('是否确认删除预约编号为"' + schedulingIds + '"的数据项？').then(function() {
        return delScheduling(schedulingIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
		this.open2 = false;
      }).catch(() => {});
    },
	/** 批量删除按钮操作 */
	handleDeletes() {
	  const schedulingBachIds = this.data.schedulingBachId;
	  this.$modal.confirm('是否确认删除批量预约编号为"' + schedulingBachIds + '"的数据项？').then(function() {
	    return delscheduingBach(schedulingBachIds);
	  }).then(() => {
	    this.getList();
	    this.$modal.msgSuccess("删除成功");
		this.open2 = false;
	  }).catch(() => {});
	},
	open3Dialog() {
		console.log(333333)
		this.open3 = true;
	}
  }
};
</script>

<style>
	.bg-header {
		background:  rgb(64, 158, 255);
		color: #ffffff;
	}
	.grid-header {
		text-align: center;
		padding: 10px;
	}
	.grid-content {
		text-align: center;
		padding: 5px;
		margin-top: 5px;
		margin-left: 5px;
		margin-right: 5px;
		border-radius:5px;
		cursor: pointer;
	}
	.grid-bg {
		min-height: 24px;
	}
	.bg-green {
		background: #67C23A;
		color:#ffffff;
	}
	.bg-yellow {
		background: #E6A23C;
		color:#ffffff;
	}
	.bg-red {
		background: #F56C6C;
		color:#ffffff;
	}
 .bg-purple {
	background: #909399;
	color:#000;
  }
  .bg-purple2 {
	  background: #f5f7fa;
	  color:#000;
	  border: 1px solid #000
  }
  .grid-col-frist {
	  height: 700px;
	  border-right: 1px solid #ccc;
	  overflow-y: auto;
  }
  .grid-col {
	  height: 700px;
	  border-right: 1px solid #ccc;
  }
  
  .grid-tea{
	  text-align: center;
	  padding: 10px;
	  margin-right: 5px;
	  color:#ffffff;
	  cursor: pointer;
  } 
  .bg-tea {
	  background:  rgb(64, 158, 255);
  }
  .bg-tea.on {
	  background:  royalblue;
  }
  .drow {
	  margin-bottom: 20px;
	  
  }
  .dcol {
	  font-size: 18px;
  }
</style>
